<template>
	<view>
		<app-header color="#fff" :title="headerTitle" />
		<view class="order-detail comm-container">
			<view class="order-header">
				<view class="logo">
					<image src="@/subpages/static/images/image-04.png" mode="widthFix" class="img" />
				</view>
				<view class="ems-info">
					<text class="name">{{dataDetail.kuaidicom}}</text>
					<text class="info-num">{{dataDetail.orderNo}}</text>
				</view>
			</view>
			<view class="tracking-card">
				<view class="tracking-title">轨迹</view>
				<view class="tracking-info">
					<view class="tracking-item">
						<view class="status completed">
							<text class="name">{{dataDetail.status || "未知"}}</text>
						</view>
						<view class="date">
							<text>{{dataDetail.orderTime}}</text>
						</view>
						<view class="content">
							<text>客户签收人：{{dataDetail.recName}}</text>
							<text class="tel">{{dataDetail.recPhone}}</text>,
						</view>
					</view>
					<!-- <view class="tracking-item" v-for="dataDetail.rows"> -->
						<!-- <view class="status">
							<text class="name">派件中</text>
						</view>
						<view class="date">
							<text>2025-01-02 19:03</text>
						</view>
						<view class="content">
							<text>客户签收人：派件中。签收人凭取货码签收。派件中，感谢使用德邦快递，期待再次为您服务。如有疑问请联系：</text>
							<text class="tel">12369874562</text>,
							<text>投诉电话：</text>
							<text class="tel">15698745632</text>。
						</view> -->
					<!-- </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AppHeader from "@/subpages/components/header.vue"
	import { queryExpressInfoApi } from "@/api/logistics.js"
	export default {
		components: {
			AppHeader
		},
		data() {
			return {
				id: "",
				headerTitle: "订单详情",
				dataDetail: {}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData()
		},
		methods: {
			async getData() {
				const data = await queryExpressInfoApi(this.id);
				if(data.code ==200){
					this.dataDetail = data.data;
				}else{
					this.dataDetail = {}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-header {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		.logo {
			width: 120rpx;
			.img {
				width: 100%;
			}
		}
		.ems-info {
			margin-left: 20rpx;
			.name {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				display: block;
			}
			.info-num {
				font-size: 26rpx;
			}
		}
	}
	.tracking-card {
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		margin-top: 40rpx;
		.tracking-title {
			font-size: 32rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #D3D3D3;
		}
		.tracking-info {
			margin-top: 30rpx;
			.tracking-item {
				border-left: 1px solid #D3D3D3;
				padding-left: 25rpx;
				padding-bottom: 40rpx;
				&:before {
					content: "";
					width: 1px;
					position: absolute;
					left: 0;
					height: 100%;
					background: #D3D3D3;
				}
				&:last-child {
					padding-bottom: 0;
					border-left: 0;
					position: relative;
					&:before{
						height: 70%;
					}
				}
				.status {
					position: relative;
					display: inline-block;
					font-size: 30rpx;
					&.completed {
						&::before {
							background-color: #2979FF;
						}
					}
					&::before {
						content: "";
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						left: -35rpx;
						top: 0;
						background-color: #D3D3D3;
						border-radius: 50%;
					}
					.name {
						position: relative;
						top: -10rpx;
					}
				}
				.date {
					display: inline-block;
					position: relative;
					top: -10rpx;
					color: #6D6D6D;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
				.content {
					font-size: 28rpx;
					line-height: 45rpx;
					color: #6D6D6D;
					.tel {
						color: #2979FF;
					}
				}
			}
		}
	}
</style>